/*存放基本类*/

/*flex布局*/
$direction: 'row', 'column';
$wrap: 'nowrap', 'wrap';
$alignContent: 'center', 'flex-start', 'flex-end', 'space-around', 'space-between', 'stretch';
$justifyContent:'between','around','center','start','end','evenly';
$alignItems:'start','end','center', 'stretch';

// 主轴的方向（即项目的排列方向）
@each $directionItem in $direction {
  $name:$directionItem;

  .flex-#{$name}{
    display: flex;
    flex-direction: #{$name};

    // 如果需要在主轴上定义对其方式，应该先定义交叉轴的对齐方式
    // align-items属性定义项目在交叉轴上如何对齐。
    @each $alignItem in $alignItems{
      $alignItemName:$alignItem;
      @if $alignItem == 'center' {
        $alignItemName:$alignItem;
      }
      @else if $alignItem == 'stretch' {
        $alignItemName:$alignItem;
      }
      @else{
        $alignItemName:flex-#{$alignItemName}
      }

      &-#{$alignItem}{
        display: flex;
        flex-direction: #{$name};
        align-items: #{$alignItemName};

        // 在主轴上定义对其方式
        @each $j in $justifyContent{
          &-#{$j}{
            $position:$j;
            @if $j == 'center' {
              // 居中
              $position:#{$j};
            }

            @if $j == 'between' {
              // 俩端对齐，中间平分
              $position:space-#{$j};
            }

            @if $j == 'around' {
              // 俩端留1份，中间留2份
              $position:space-#{$j};
            }

            @if $j == 'evenly' {
              // 俩端于中间各留2份
              $position:space-#{$j};
            }

            @if $j == 'start' {
              // 向株主轴开始方向对齐
              $position:flex-#{$j};
            }

            @if $j == 'end' {
              // 向株主轴反方向对齐
              $position:flex-#{$j};
            }

            display: flex;
            flex-direction: #{$name};
            align-items: #{$alignItemName};
            justify-content: #{$position};

          // 是否换行，此属性不是必需
          @each $wrapItem in $wrap {
            &-#{$wrapItem}{
                display: flex;
                flex-direction: #{$name};
                align-items: #{$alignItemName};
                justify-content: #{$position};
                flex-wrap:#{$wrapItem};  
              }
            }
          }
        }
      }
    }
  }
}